<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>兑换码</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/ExchangeCode.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
		<script src="js/utils.js" type="text/javascript" charset="UTF-8"></script>
		<link rel="stylesheet" type="text/css" href="css/_common.css" />
	</head>

	<body>
		<div class="EC-web">
			<div class="music">
				<audio id="music" src="music/Valentin - A Little Story.mp3" loop="loop" autoplay></audio>
				<img id="musicImg" src="images/music5.png" "musicImg" class="yiny" />
			</div>
			<div class="conte">
				<h5>请输入兑换码</h5>
				<div class="EC-text">
					<form>
						<input type="" name="" id="duiH" value="" />
					</form>
				</div>
				<div class="EC-submit2">
					<img src="images/box_15.png" /> 提交
				</div>
			</div>
			<footer class="footer">
				<a href="index.html">
					<div class="fanH"></div>
				</a>
			</footer>
		</div>
		<!--成功-->
		<div class="chengG">
			<div class="duiH_box">
				<div class="duiH">
					<div class="img"><img src="images/duih.png"/></div>
					<a href="plat.html"><div class="GuanBann"></div></a>
				</div>
			</div>
		</div>
		<!--失败-->
		<div class="shiB">
			<div class="duiH_box">
				<div class="duiH">
					<div class="img"><img src="images/shib_03.png"/></div>
					<a href="plat.html"><div class="GuanBann"></div></a>
					<div class="congX">重新输入</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.transit.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(".music").on("click", function() {
				var audio = $("audio")[0];
				if(audio.paused) {
					audio.play() //暂停
				} else {
					audio.pause(); //播放
				}
			})
			var yiny = true;
			$(".music").on("click", function() {
				if(yiny) {
					$("#musicImg").css("animation-play-state","paused");
					yiny = false;
				} else {
					$("#musicImg").css("animation-play-state","inherit");
					yiny = true;
				}
			})
			$(".EC-submit2").on("click", function() {
				var val = $("#duiH").val();
				var min = 5;
				var max = 7;
				if(val == "") {
					alert("不能为空")
				} else if(isNaN(val)) {
					alert("只能输入数字")

				} else if(val.length > min && val.length < max && !isNaN(val)) {
					chengG();
				} else {
					shiB();
				}
				$("#duiH").val("");
			})
			$(".shiB .duiH_box .duiH .congX").on("click", function() {
				congX();
			})
			function chengG(){
				$(".chengG").css("z-index","1")
				$(".chengG").transit({
					"opacity":"1"
				})
				$(".chengG .duiH_box").transit({
					y: 0,
					"opacity":"1"
				},200)
			}
			function shiB(){
				$(".shiB").css("z-index","2")
				$(".shiB").transit({
					"opacity":"1"
				})
				$(".shiB .duiH_box").transit({
					y: 0,
					"opacity":"1"
				},200)
			}
			function congX(){
				$(".shiB").css("z-index","-1")
				$(".shiB").transit({
					"opacity":"0"
				})
				$(".shiB .duiH_box").transit({
					y: "-200%",
					"opacity":"0"
				},200)
			}
		</script>
	</body>

</html>